<template>
  <div class="container">
    <el-form class="input-form"
             label-position="right"
             label-width="100px"
             ref="editForm"
             :rules="rules"
             :model="form"
    >
      <span>基本信息</span>
      <el-divider></el-divider>
      <el-row >
        <el-col :span="8" :offset="4">
          <el-form-item label="通知类型"  prop="messageTypes">
            <el-checkbox-group v-model="form.messageTypes" :min="1">
              <el-checkbox label="inner">站内信</el-checkbox>
              <el-checkbox label="sms" >短信</el-checkbox>
              <el-checkbox label="email" >邮件</el-checkbox>
              <el-checkbox label="wechat" >微信</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <!--<el-col :span="8" >
          <el-form-item label="使用模板"  prop="useTemplate">
            <el-radio-group v-model="form.useTemplate" >
              <el-radio label="0">否</el-radio>
              <el-radio label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>-->
      </el-row>
      <el-row v-if="form.messageTypes.includes('sms')">
        <el-col :span="18" :offset="4" >
          <el-form-item label="短信模板编号" prop="smsPlatformCode">
            <el-input v-model="form.smsPlatformCode" placeholder="短信平台模板编号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="18" :offset="4" >
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="8" :offset="4">
          <el-form-item label="优先级" prop="priority">
            <el-radio-group v-model="form.priority" >
              <el-radio label="H">高</el-radio>
              <el-radio label="M">中</el-radio>
              <el-radio label="L">低</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" >
          <el-form-item label="类型" prop="contentType">
            <el-radio-group v-model="form.contentType" >
              <el-radio label="announce">公告</el-radio>
              <el-radio label="news">新闻</el-radio>
              <el-radio label="meeting">会议</el-radio>
              <el-radio label="other">其它</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row  >
        <el-col :span="18" :offset="4">
          <el-form-item label="内容" prop="content" >
            <el-input type="textarea" :rows="5" v-model="form.content"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!--<el-row  v-show="form.category == 'template'">
        <el-col :span="18" :offset="4">
          <el-form-item label="模板列表" prop="list" >
            <el-table border highlight-current-row stripe size="small" height="400">
              <el-table-column type="index" align="center"/>
              <el-table-column label="模板类型" align="center" width="100"/>
              <el-table-column label="标题" align="center" />
              <el-table-column label="内容" align="center" show-overflow-tooltip />
              <el-table-column label="操作" align="center"  width="80"/>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="form.category == 'template'">
        <el-col :span="18" :offset="4">
          <el-button style="margin-left: 100px"  icon="el-icon-search">选择模板</el-button>
        </el-col>
      </el-row>-->
      <span>收件人信息</span>
      <el-divider></el-divider>
      <el-row >
        <el-col :span="18" :offset="4">
          <el-form-item label="收件人类型" prop="receiverType">
            <el-radio-group v-model="form.receiverType" @change="receiverTypeChange">
              <el-radio label="all">全体用户</el-radio>
              <el-radio label="user">指定用户</el-radio>
              <el-radio label="role">指定角色</el-radio>
              <el-radio label="dept">指定部门</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="18" :offset="4">
          <el-form-item prop="receiverCodes">
            <el-input v-model="form.receiverNames" suffix-icon="el-icon-search"
                      placeholder="选择用户" v-if="form.receiverType == 'user'"
                      readonly @focus="userSelectVisible = true"
            />
            <user-table-select :propAppedToBody="true" :propVisible="userSelectVisible" :propMultiSelect="true" :propAllowClear="true"
                               @closed="userSelectVisible = false" @clear="selectClear" @confirm="userSelectConfirm"
                               :propInitSelectedRowKeys="form.receiverCodes"  />
            <el-input v-model="form.receiverNames" suffix-icon="el-icon-search"
                      placeholder="选择角色" v-if="form.receiverType == 'role'"
                      readonly
            />
            <el-input v-model="form.receiverNames" suffix-icon="el-icon-search"
                      placeholder="选择部门" v-if="form.receiverType == 'dept'"
                      readonly  @focus="officeSelectVisible = true"
            />
            <office-tree-select :propAppedToBody="true" :propVisible="officeSelectVisible" :propMultiSelect="true" :propAllowClear="true"
                               @closed="officeSelectVisible = false" @clear="selectClear" @confirm="officeSelectConfirm"
                               :propInitSelectedRowKeys="form.receiverCodes"  />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="4">
          <el-button type="primary" style="margin-left: 100px" @click="submitForm" icon="el-icon-position">发送消息</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>

import UserTableSelect from '@/components/sys/UserTableSelect'
import OfficeTreeSelect from '@/components/sys/OfficeTreeSelect'

export default {
  name: 'MessagePush',
  data() {
    const validateReceiver = (rule, value, callback) => {
      if (this.form.receiverType === 'all') {
        callback()
        return
      }
      if (global.strings.isBlank(this.form.receiverCodes)) {
        callback(new Error('请选择接收人'))
        return
      }
      callback()
    }

    return {
      form: {
        category: 'plain',
        receiverType: 'all',
        priority: 'M',
        contentType: 'announce',
        messageTypes: ['inner'],
        useTemplate: '0'
      },
      userSelectVisible: false,
      officeSelectVisible: false,
      rules: {
        messageTypes: [
          { required: true, message: '请选择消息类型' },
        ],
        title: [
          { required: true, message: '请输入消息标题' },
        ],
        content: [
          { required: true, message: '请输入消息内容' },
        ],
        receiverType: [
          { required: true, message: '请选择收件人类型', trigger: 'change' },
        ],
        priority: [
          { required: true, message: '请选择优先级', trigger: 'change' },
        ],
        contentType: [
          { required: true, message: '请选择类型', trigger: 'change' },
        ],
        receiverCodes: [
          { validator: validateReceiver },
        ]
      }
    }
  },
  components: {
    OfficeTreeSelect,
    UserTableSelect
  },
  methods: {
    submitForm() {
      this.$refs.editForm.validate((valid) => {
        if (!valid) {
          return false
        }
        this.$ajax.post('/msg/push', this.form).then(resp => {
          this.utilMessage.success('已添加推送任务，推送情况请查看推送记录')
        })
      })
    },
    resetForm() {
      this.$refs.editForm.resetFields()
    },
    receiverTypeChange(val) {
      this.$set(this.form, 'receiverCodes', '')
      this.$set(this.form, 'receiverNames', '')
    },
    selectClear() {
      this.$set(this.form, 'receiverCodes', '')
      this.$set(this.form, 'receiverNames', '')
    },
    userSelectConfirm(selectedRows) {
      this.$set(this.form, 'receiverCodes', selectedRows.map(o => o.id).join(','))
      this.$set(this.form, 'receiverNames', selectedRows.map(o => o.name).join(','))
    },
    officeSelectConfirm(selectedRows) {
      this.$set(this.form, 'receiverCodes', selectedRows.map(o => o.id).join(','))
      this.$set(this.form, 'receiverNames', selectedRows.map(o => o.label).join(','))
    }
  }
}
</script>

<style lang="scss" scoped>
  .container {
    height: 100%;
    background-color: #fff;
  }
</style>
